import "./index.css";

import * as echarts from "echarts";

import { useEffect } from "react";

function App() {
  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
        textStyle: {
          color: "#fff",
        },
        left: "center",
      },
      color: [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
      ],
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        axisLabel: {
          //x轴文字的配置
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  }, []);

  return (
    <div className="App">
      <header>2023年千锋郑州</header>
      <main>
        <div className="left">
          <div className="left-top" id="main"></div>
          <div className="left-bottom"></div>
        </div>
        <div className="center"></div>
        <div className="right"></div>
      </main>
    </div>
  );
}

export default App;
